<template>
	<!-- banner -->
	<view class="banner-swiper">
		<swiper class="home-swiper" 
			:current="activeIndex" 
			:indicator-dots="true" 
			indicator-color="#999" 
			indicator-active-color="#fff" 
			:autoplay="true"
			:interval="3000"
			:circular="true">
			<swiper-item class="swiper-item" v-for="(item,index) in bannerData" :key="index">
				<view class="item-image"><image :src="https+item.picturePath" mode="aspectFill"></image></view>
			</swiper-item>
		</swiper>
		<view class="navbar-user" @click="userTo"><image src="../../static/grzl.png" mode="" class="grzl"></image> </view>
	</view>
</template>

<script>
	export default {
		name:"banner",
		props:{
			bannerData:{
				type: Array,
				default(){
					return []
				}
			}
		},
		data() {
			return {
				https: getApp().globalData.picturePath,
				activeIndex: 0,
			};
		},
		created() {
		
		},
		methods:{
			userTo(){
				const token = uni.getStorageSync('token')
				if(token){
					uni.navigateTo({
						url: '/pages/me/me'
					})
				}else{
					uni.navigateTo({
						url: '/pages/loginBtn/loginBtn'
					})
				}
			
			}
		}
	}
</script>

<style scoped lang="scss">
	.navbar-user{
		width: 50rpx;
		height: 50rpx;
		position: absolute;
		top: 10rpx;
		z-index: 11;
		right: 20rpx;
		background: #000;
		border-radius: 50%;
	}
	.grzl{
		    margin-top: 2px;
		    width: 30rpx;
		    height: 40rpx;
		    margin-left: 5px;
	}
	.banner-swiper{
		width: 100%;
		height: 316rpx;
		position: relative;
		.home-swiper{
			height: 100%;
			.swiper-item{
				height: 100%;
				.item-image{
					height: 100%;
					image{
						width: 100%;
						height: 100%;
					}
				}
			}
		}
	}
</style>
